<div class="comment-table-container" [@flyIn]="'active'">

    <div class="example-header">
        <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="搜索">
        </mat-form-field>
    </div>

    <mat-table #table [dataSource]="dataSource">
        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef>序号</mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.id}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="content">
            <mat-header-cell *matHeaderCellDef> 内容</mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.content}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="userName">
            <mat-header-cell *matHeaderCellDef> 用户</mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.userName}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="createTime">
            <mat-header-cell *matHeaderCellDef> 时间</mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.createTime | customDate}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="action">
            <mat-header-cell *matHeaderCellDef>操作</mat-header-cell>
            <mat-cell *matCellDef="let row">
                <button mat-icon-button (click)="delComment(row)">
                    <mat-icon class="mat-18">delete</mat-icon>
                </button>
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

    <mat-paginator #paginator
                   [pageSize]="5"
                   [pageSizeOptions]="[5, 10, 20]">
    </mat-paginator>

</div>
